<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="css/grzx/youce.css" />
<script type="text/javascript" src="js/grzx/grzx.js"></script>
<style type="text/css">
#strength_length {
	height: 6px;
	width: 100px;
	padding: 2px;
	border: 1px solid #ccc;
}

.lv1 {
	background: red;
}

.lv2 {
	background: blue;
	width: 200px;
}

.lv3 {
	background: green;
	width: 300px;
}
</style>
</head>
<body>
	<div class="grzx_r_div_2-r" id="grzx_r_dlmm" style="margin-top: 0px">
		<div class="grzx_r_div_2_1 ">修改密码</div>
		<ul>
			<li class="grzx_r_grzx_r_div_2_1_5">
				<div class="grzx_r_div_2_1_1">原密码</div>
				<div class="grzx_r_grzx_r_div_2_1_2">
					<form action="" method="post">
						<input type="password" placeholder="请输入原来密码"
							class="grzx_r_input_kuang" />
					</form>
				</div>
				<div class="grzx_r_div_2_1_3">核对身份后，才可修改密码</div>
			</li>
			<li>
				<div class="grzx_r_div_2_1_1">新密码</div>
				<div class="grzx_r_grzx_r_div_2_1_2" style="position: relative;">
					<div id="demo">
						<form action="" method="post">
							<input type="password" id="ipt"
								placeholder="建议6-18位数字、字母、符号的组合密码" class="grzx_r_input_kuang" />
						</form>
						<div style="position: absolute; top: -20px; left: 350px;">
							<em>密码强度：</em><em id="strength"></em>
							<div id="strength_length"></div>
						</div>
					</div>
				</div>
				<div class="grzx_r_div_2_1_3">请牢记新密码</div>
			</li>
			<li>
				<div class="grzx_r_div_2_1_1">确认密码</div>
				<div class="grzx_r_grzx_r_div_2_1_2" style="position: relative;">
					<form action="" method="post">
						<input type="password" placeholder="再次输入密码" id="ipt2"
							class="grzx_r_input_kuang" onkeyup="validate()" />
						<div
							style="position: absolute; top: 0px; left: 350px; width: 100px">
							<span id="tishi"></span>
						</div>
					</form>
				</div>
				<div class="grzx_r_div_2_1_3">再次输入新密码</div>
			</li>
			<li>
				<div class="grzx_r_div_2_1_4">
					<form action="" method="post">
						<input type="submit" value="保存" id="asubmit" />
					</form>
				</div>
			</li>
		</ul>
	</div>
	<script>
		function validate() {
			var pwd1 = document.getElementById("ipt").value;
			var pwd2 = document.getElementById("ipt2").value;
			if (pwd1 == pwd2) {
				document.getElementById("tishi").innerHTML = "<font color='green'>两次密码相同</font>";
				document.getElementById("asubmit").disabled = false;
				document.getElementById("asubmit").style.backgroundColor="#F3B900";
			} else {
				document.getElementById("tishi").innerHTML = "<font color='red'>两次密码不相同</font>";
				document.getElementById("asubmit").disabled = true;
				document.getElementById("asubmit").style.backgroundColor="#F8F8FA";
			}
		}
	</script>
	<script type="text/javascript">
		(function(window) {
			function $(id) {
				return document.getElementById(id);
			}
			;
			var arr = [ "", "低", "中", "高" ];
			// 获取对象
			var ipt = $("ipt"), strength = $("strength"), strLength = $("strength_length");
			// 密码输入事件
			ipt.onkeyup = function() {
				var s = 0;
				var txt = this.value;
				if (/[a-zA-Z]/.test(txt)) {
					s++;
				}
				;
				if (/[0-9]/.test(txt)) {
					s++;
				}
				;
				if (/[^0-9a-zA-Z]/.test(txt)) {
					s++;
				}
				;
				if (txt.length < 6) {
					s = 0;
				}
				;
				strength.innerHTML = arr[s];
				strLength.className = "lv" + s;
			}
		})(window)
	</script>
</body>
</html>